<template>
  <div class="box">
    <div class="bg"></div>
    <van-nav-bar
      id="van-bar"
      :title="title"
      :border="border"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #left>
        <img
          :style="{ width: widthPx, height: heightPx }"
          src="@/assets/iconPerfectInformation/nav_back@2x.png"
        />
      </template>
    </van-nav-bar>
    
    <div
    class="glance"
      :style="
        'top:' +
        (topheight  )+
        'px;height:calc(100vh - ' +
        (topheight )+
        'px);width:100%;overflow:auto;'
      "
    >
    
      <van-list v-model="loading" :finished="finished" finished-text="— THE END —" @load="getData" class="glancelist">
        
        <div class="list" v-for="(item, index) in list" :key="index">
          <img class="headImg" :src="item.spread_user.avatar" alt="" srcset="" />
          <div class="userInfo">
            <p> <span class="name">{{ item.spread_user.nickname }}</span>
         </p>
          <p class="userData">{{item.time}}</p>
          
          </div>
          <p class="price">+{{item.number}}钻石</p>
        </div>
        <!-- <p style="text-align: center;margin: 24px 0;color: #AAAAAA;font-size: 10px;">— THE END —</p> -->
      </van-list>
    </div>
  </div>
</template>

<script>
import {  getSpreadList } from "@/api/index"
export default {
  data() {
    return {
      border: "",
      widthPx: "28px",
      heightPx: "28px",
      topheight: 0,
      isActive: 0,
      isshow:true,
      title: "有效邀请好友",
      isActive:0,
       loading: false,
      finished: false,
       searchParameter: {
        //  * 城市编码  为空为首页检索接口
       
      
      },
      list: [
       
      ],
    };
  },
  mounted() {
    this.topheight = document.getElementById("van-bar").offsetHeight;
     this.getData()
  },

  methods: {
    onClickLeft() {
      this.$router.back();
    },
    getData(){
 const queryString = Object.keys(this.searchParameter)
        .map((key) => {
          console.log(typeof this.searchParameter[key])
          if (this.searchParameter[key] && !!this.searchParameter[key]) {
            return `${encodeURIComponent(key)}=${encodeURIComponent(
              this.searchParameter[key]
            )}`
          }
        })
        .filter((res) => {
          return res
        })
        .join('&')
         getSpreadList(queryString).then((res) => {
        // this.list=res.data.list
        let list = []
        res.data.list.forEach((el) => {
          var date = new Date();
        date.setTime(el.add_time);
        var month = date.getMonth() + 1;
        if (month < 10) month = "0" + month;
        var hours = date.getHours();
        if (hours < 10) hours = "0" + hours;
        var minutes = date.getMinutes();
        if (minutes < 10) minutes = "0" + minutes;
      
        el.time=month + "/" +
          date.getDate() + " " +
          hours +":" +
          minutes ;
         console.log(time);
        })
        this.list = list.concat(...res.data.list)
        console.log(this.list);
        // 加载状态结束
        this.loading = false
        this.finished = true
      })
    }
  },
};
</script>

<style scoped>
.active{
  position: relative;
margin: 8px auto 0 auto;
width: 194px;
display: flex;
height: 36px;
background: #E8EDFC;
border-radius: 8px;
}
.active div{
  flex: 1;
  text-align: center;
  line-height: 36px;
  font-size: 14px;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
color: #767676;
}
.isActive{
  width: 96px;
height: 32px;
background: #FFFFFF;
border-radius: 8px;
line-height: 32px !important;
margin: 2px;
color: #1A1A1A !important;

}
.setting{
  padding: 14px 16px;
  box-sizing: border-box;
  background: #E8EDFC;
  width: 343px;
height: 66px;
margin: 0 auto;
/* background: linear-gradient(180deg, #3764EC 0%, #6B85F7 100%); */
border-radius: 8px;
border: 1px solid rgba(82,117,241,0.3);
}
.glance{
  position:absolute;
}
.bg{
  width: 375px;
height: 88px;
position: absolute;
  top: 0;
background: linear-gradient(180deg, #CDE1FD 0%, rgba(255,255,255,0) 100%);
}
.glancelist {
  width: 345px;
  margin: 0 auto;
}
.headImg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 7px;
}
.userInfo{
  display: inline-block;
  line-height: 1.5 !important;
  vertical-align: top;
}
.userData{
  font-size: 12px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #767676;
}
.price{
  position: absolute;
  top: 16px;
  right: 0;
  font-size: 16px;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
color: #1A1A1A;
}
.list {
  padding: 16px 0;
  position: relative;
  border-bottom: #D8D8D8 solid 1px;
}
.list span {
  display: inline-block;
  vertical-align: top;
}
.name{
  margin-right: 7px;
  font-size: 16px;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
color: #1A1A1A;

}
.sex {
  background-color: #fcdbdb;
  border-radius: 8px;
  height: 16px;
  margin: 3px 7px;
  margin-left: 0;
        width: 38px;
  text-align: center;
  line-height: 16px;
  color: #fa5151;
}
.vip {
  margin: 3px 7px;
  margin-left: 0;
  width: 30px;
  height: 16px;
  background: linear-gradient(180deg, #e8b87a 0%, #fde0b9 100%);
  border-radius: 8px;
  text-align: center;
  line-height: 17px;
  vertical-align: top;
  font-size: 12px;
  color: #663409;
}
.left{
  display: inline-block;
}
.title{
  font-size: 14px;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
color: #3D3D3D;
}
.vip1 {
  display: inline-block;
  margin: 3px 7px;
  width: 54px;
  height: 16px;
  background: linear-gradient(180deg, #e8b87a 0%, #fde0b9 100%);
  border-radius: 8px;
  text-align: center;
  line-height: 17px;
  vertical-align: top;
  font-size: 12px;
  color: #663409;
}
.text{
  font-size: 12px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #767676;
}
.sex img {
  margin-right: 2px;
  width: 8px;
  display: inline-block;
  margin-top: 3px;
  height: 12px;
}
.sex .age {
  display: inline-block;
  vertical-align: top;
  font-size: 12px;
  margin-top: 3px;
  height: 12px;
}
.van-cell {
  background-color: transparent;
}
.van-cell::after {
  border-color: #d8d8d8;
}
.van-cell__value {
  color: #1a1a1a;
  font-weight: 500;
}
.btn{
    float: right;
    margin: 6px 0;
    text-align: center;
    width: 84px;
height: 28px;
border-radius: 8px;
line-height: 28px;
border: 1px solid #767676;
font-size: 12px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
color: #767676;
}
</style>
